<template>
  <div class="mod-hotSearch-add-or-update">
    <el-dialog
      :title="!dataForm.id ? $t('brand.add') : $t('sysManagement.modify')"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        @submit.native.prevent
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-form-item :label="$t('o2oBrand.name')" prop="name">
          <el-input
            size="small"
            v-model="dataForm.name"
            controls-position="right"
            :min="0"
            maxlength="50"
            show-word-limit
            :label="$t('distributionMsg.title')"
          ></el-input>
        </el-form-item>
        <!-- 门店图片Logo -->
        <el-form-item
          :label="$t('o2oBrand.logo')"
          label-width="max-width"
          prop="logoUrl"
        >
          <DirectImgUpload
            :modelValue.sync="dataForm.logoUrl"
            :limit="1"
            :prompt="false"
            @input="imgsChange"
            cropW="200"
            cropH="200"
          />
          <!-- <ImgUpload
              v-model="dataForm.logoUrl"
              :limit="1"
              :prompt="false"
              @input="imgsChange"
            /> -->
        </el-form-item>
        <el-form-item>
          推荐尺寸1:1,仅限1张，支持jpg、png,大小不超过2M
        </el-form-item>
        <el-form-item :label="$t('o2oBrand.brief')" prop="describe">
          <el-input
            size="small"
            v-model="dataForm.describe"
            controls-position="right"
            type="textarea"
            :min="0"
            maxlength="250"
            show-word-limit
            :label="$t('publics.content')"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="default-btn" @click="visible = false">
          {{ $t("remindPop.cancel") }}
        </div>
        <div class="default-btn primary-btn" @click="dataFormSubmit()">
          {{ $t("remindPop.confirm") }}
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      var validateTitle = (rule, value, callback) => {
        if (String(value).trim() === "") {
          callback(new Error(this.$i18n.t("order.cannotEmpty")));
        } else {
          callback();
        }
      };
      var validateContent = (rule, value, callback) => {
        if (String(value).trim() === "") {
          callback(new Error(this.$i18n.t("order.cannotEmpty")));
        } else {
          callback();
        }
      };
      return {
        dataForm: {
          id: "",
          name: "",
          nameEn: "",
          logoUrl: "",
          describe: "",
          orderNum: 0,
          createTime: "",
        },
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
        isSubmit: false,
        addProdVisible: false,
        visible: false,
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dataRule: {
          name: [
            {
              required: true,
              message: this.$i18n.t("hotSearch.titleCannotBeEmpty"),
              trigger: "blur",
            },
            {
              min: 1,
              max: 50,
              message: this.$i18n.t("hotSearch.length50"),
              trigger: "blur",
            },
            { validator: validateTitle, trigger: "blur" },
          ],
          logoUrl: [
            {
              required: true,
              message: this.$i18n.t("publics.imageNoNull"),
              trigger: "blur",
            },
          ],
          describe: [
            {
              required: true,
              message: this.$i18n.t("hotSearch.ContentCannotBeEmpty"),
              trigger: "blur",
            },
            {
              min: 1,
              max: 255,
              message: this.$i18n.t("hotSearch.length250"),
              trigger: "blur",
            },
            { validator: validateContent, trigger: "blur" },
          ],
        },
      };
    },
    components: {},
    methods: {
      /**
       * 图片的值发生改变，重新校验该表单项
       */
      imgsChange(url) {
        this.logoUrl = url;
      },
      init(data) {
        this.visible = true;
        this.isSubmit = false;
        if (data) {
          this.dataForm = Object.assign({}, data);
          this.$refs["dataForm"].clearValidate();
        } else {
          this.$nextTick(() => {
            this.$refs["dataForm"].resetFields();
            this.dataForm = {
              id: "",
              name: "",
              nameEn: "",
              logoUrl: "",
              describe: "",
              orderNum: 0,
              createTime: "",
            };
          });
        }
      },
      // 表单提交
      dataFormSubmit() {
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            let param = this.dataForm;
            if (this.isSubmit) {
              return false;
            }
            this.isSubmit = true;
            this.$http({
              url: this.$http.adornUrl(`/platform/brandTag`),
              method: this.dataForm.id ? "put" : "post",
              data: this.$http.adornData(param),
            })
              .then(({ data }) => {
                this.$message({
                  message: this.$i18n.t("remindPop.success"),
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.visible = false;
                    this.$emit("refreshDataList", this.page);
                  },
                });
              })
              .catch((e) => {
                this.isSubmit = false;
              });
          }
        });
      },
    },
  };
</script>
